<template>
  <div>
    <BaseForm ref="searchForm" type="search" :items="formItems" v-model:form="searchParams" @search="handleSearch">
    </BaseForm>

<!--    <canvas id="canvas" style="width: 500px; height: 500px"/>-->

    <BaseTable ref="baseTable" :getTableDataFn="commonService.getLogList" :searchParams="searchParams">
      <el-table-column prop="createUserId" label="用户ID" />
      <el-table-column prop="createUserName" label="姓名" />
      <el-table-column prop="accountName" label="登录账号（手机号）" />
      <el-table-column prop="operationTypeName" label="操作类型" />
      <el-table-column prop="moduleTypeName" label="操作模块" />
      <el-table-column prop="content" label="操作内容" />
      <el-table-column prop="createTime" label="操作时间" width="170" />
      <template #batchBtn>
        <el-button type="primary" @click="download">
          <el-icon><Bottom></Bottom> </el-icon>导出
        </el-button>
      </template>
    </BaseTable>
  </div>
</template>

<script setup lang="ts">
import { commonService } from '@/api/common';
import { basicConfigService } from '@/api/basicConfig';
import {
  BlinnPhongMaterial,
  Camera,
  Color,
  DirectLight,
  MeshRenderer,
  PrimitiveMesh,
  Vector3,
  WebGLEngine
} from "@galacean/engine";
const formItems = ref([
  {
    name: '姓名',
    key: 'createUserName',
    type: 'input',
  },
  {
    name: '登录账号',
    key: 'accountName',
    type: 'input',
  },
  {
    name: '操作类型',
    key: 'operationType',
    clearable: true,
    type: 'select',
    options: [
      { value: 1, label: '登录' },
      { value: 2, label: '新增' },
      { value: 3, label: '编辑' },
      { value: 4, label: '删除' },
      { value: 6, label: '审核' },
      { value: 7, label: '导出' },
      { value: 8, label: '修改密码' },
      { value: 9, label: '导入' },
      { value: 99, label: '其他' },
    ],
  },

  {
    name: '操作时间',
    key: 'date',
    type: 'datetimerange',
    placeholder: '选择时间范围',
  },
]);
const searchParams = ref({
  createUserName: '',
  accountName: '',
  operationType: '',
  date: undefined,
  createTimeStart: undefined,
  createTimeEnd: undefined,
});
const baseTable = ref(null);
const handleSearch = () => {
  const date = searchParams.value.date;
  if (date && date.length == 2) {
    searchParams.value.createTimeStart = date[0] || undefined;
    searchParams.value.createTimeEnd = date[1] || undefined;
  } else {
    searchParams.value.createTimeStart = undefined;
    searchParams.value.createTimeEnd = undefined;
  }
  baseTable.value.handleSearch({ ...searchParams.value, date: undefined });
};

const download = async () => {
  // 下载
  console.log('下载');
  basicConfigService
    .systemLogDownload({
      data: {
        ...searchParams.value,
      },
    })
    .then((res) => {
      var blob = new Blob([res]);
      let url = window.URL.createObjectURL(blob);
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', '系统日志列表.xls');
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
};


const handleEdit = () => {

  console.log("this is a test");


  // Init Engine
  WebGLEngine.create({ canvas: "canvas"}).then((engine) => {
    // Adapter to screen
    engine.canvas.resizeByClientSize();

    // Get root entity of current scene
    const scene = engine.sceneManager.activeScene;
    const rootEntity = scene.createRootEntity("root");

    // Init Camera
    let cameraEntity = rootEntity.createChild("camera_entity");
    cameraEntity.transform.position = new Vector3(0, 5, 10);
    cameraEntity.transform.lookAt(new Vector3(0, 0, 0));
    cameraEntity.addComponent(Camera);
    scene.background.solidColor.set(1, 1, 1, 1);

    // Create a entity to add light component
    let lightEntity = rootEntity.createChild("light");

    // Create light component
    let directLight = lightEntity.addComponent(DirectLight);
    directLight.color = new Color(1.0, 1.0, 1.0);
    directLight.intensity = 0.5;

    // Control light direction by entity's transform
    lightEntity.transform.rotation = new Vector3(45, 45, 45);

    // Create Cube
    let cubeEntity = rootEntity.createChild("cube");
    let cube = cubeEntity.addComponent(MeshRenderer);
    cube.mesh = PrimitiveMesh.createCuboid(engine, 2, 2, 2);
    cube.setMaterial(new BlinnPhongMaterial(engine));

    // Run Engine
    engine.run();
  });
}


onMounted(() => {
  // handleEdit()
})

</script>

<style lang="less" scoped></style>
